<template>
  <div>
    <div class="center">
      <ul class="infinite-list" style="overflow: auto">
        <li v-for="(item, index) in data" :key="item.id">
          <div class="aic item mb20">
            <div class="aic">
              <div class="cff1e10">*</div>
              <div class="mlr10">审核手机号</div>
              <div class="wInput">
                <el-input :disabled="disabled" v-model="item.phone" />
              </div>
            </div>
            <div class="aic mlr30">
              <div class="cff1e10">*</div>
              <div class="mlr10">审核验证码</div>
              <div class="wInput">
                <el-input :disabled="disabled" v-model="item.code" />
              </div>
            </div>
            <div class="aic">
              <div class="mlr10">备注</div>
              <div class="wInput">
                <el-input :disabled="disabled" v-model="item.remark" />
              </div>
            </div>
            <div class="ml30">
              <el-button v-if="index == 0" class="mr10" plain type="success" :disabled="disabled"
                @click="changeData('add')"><el-icon class="mlr10">
                  <Plus />
                </el-icon></el-button>
              <el-button v-if="index != 0" class="mr10" plain type="danger" :disabled="disabled"
                @click="changeData('del', index)"><el-icon class="mlr10">
                  <Minus />
                </el-icon></el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="permissionStore.isPermissionsBtn('001008001')">
      <div class='centerV' v-if="disabled">
      <el-button type="primary" :icon="Edit" @click="disabled = false">修改</el-button>
    </div>
    <div class='justify-center align-center' v-else>
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
    </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { Edit,} from '@element-plus/icons-vue'
import { ref,} from 'vue';
import { ElMessage,  } from 'element-plus';
import {usePermissionStore} from '@/store/modules/permission'
import { systemConfigListApi, editSystemConfigApi } from '@/api/auth/operationConfiguration'
 const permissionStore = usePermissionStore()
const openDialog = () => {
  if(disabled.value==false) return
  getList()
}

const loading = ref(false)
const data = ref([])
const rowData = ref([])
// 数据列表
const getList = async () => {
  let res: any = await systemConfigListApi({ id: 'AUDIT_PHONE_CONFIG' })
  if (res.code == 200) {
    let list = res.data.phones ?? [];
    if (list.length == 0) {
      let obj = {
        phone: undefined,
        remark: undefined,
        code: undefined,
        id: Date.now()
      }
      data.value = [obj]
      return
    }
    list.forEach((item, index) =>item.id = index)
    data.value=list
    rowData.value =JSON.parse(JSON.stringify(list))
  }
}

const disabled = ref(true)

// 打开修改
const changeData = (type, index = 0) => {
  if (disabled.value) return
  if (type == 'add') {
    let obj = {
      phone: undefined,
      remark: undefined,
      code: undefined,
      id: Date.now()
    }
    data.value.splice(1, 0, obj)
  } else {
    data.value.splice(index, 1)
  }
}

const onCancel = () => {
  console.log(rowData.value);
  
  data.value =JSON.parse(JSON.stringify( rowData.value))
  disabled.value=true
}
const onSubmit = () => {
  // 检查每个对象的字段是否都有值
  for (let item of data.value) {
    if (!item.phone || !item.code) {
      return ElMessage.error("需要将数据填写完整")
    }
  }
  // 如果所有字段都有值，移除id字段并返回新数组
  const phones = data.value.map(item => {
    const newItem = { ...item };
    delete newItem.id;
    return newItem;
  });

  loading.value = true;
  let obj = {
    "type": "AUDIT_PHONE_CONFIG",
    "value": {
      phones
    }
  }

  //添加
  editSystemConfigApi(obj)
    .then(() => {
      ElMessage.success('审核手机号配置成功');
      disabled.value=true
    })
    .finally(() => {
      loading.value = false;
    });
}

// 导出方法
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.item {
  width: 100%;

  .cff1e10 {
    color: #ff1e10;
  }
}

.wInput {
  width: 250px;
}

.infinite-list {
  max-height: calc(100vh - 300px);
  list-style: none;
}
</style>